// H5页面全局loading
let mask = null
function stop (e) {
  e.preventDefault()
  e.stopPropagation()
}
function createLoading () {
  if (mask) return
  mask = document.createElement('div')
  mask.setAttribute('class', 'common-loading-mask')
  const img = document.createElement('div')
  // let img = new Image()
  // gif 加载从收帧开始
  // img.src = require('../assets/images/common/loading.gif') + `?=time=${+ new Date()}`
  img.className = 'v-common-loading'
  img.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
                <rect x="0" y="7.6416" width="4" height="14.7168" fill="#FF6700" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                </rect>
                <rect x="8" y="5.1416" width="4" height="19.7168" fill="#FF6700" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                </rect>
                <rect x="16" y="7.3584" width="4" height="15.2832" fill="#FF6700" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                </rect>
            </svg>`
  mask.appendChild(img)
  document.body.appendChild(mask)
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', stop, { passive: false })// 禁止页面滑动
}
function removeLoading () {
  if (mask) {
    document.body.style.overflow = ''// 出现滚动条
    document.removeEventListener('touchmove', stop, { passive: false })
    document.body.removeChild(mask)
    mask = null
  }
}
export default {
  // eslint-disable-next-line no-unused-vars
  mounted (el, binding, vnode) {
    if (binding.value) {
      createLoading()
    }
  },
  // 数据更新的时候绑定
  // eslint-disable-next-line no-unused-vars
  updated (el, binding, vnode) {
    console.log('update')
    // let ctx = vnode.context;
    if (binding.value) {
      createLoading()
    } else {
      removeLoading()
    }
  },
  // eslint-disable-next-line no-unused-vars
  beforeUnmount (el, binding, vnode) {
    console.log('unbind')
    if (binding.value) {
      removeLoading()
    }
  }
}
